<template>
    <div class="GroupChildren">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="我的团队"
                    left-arrow
                    :right-text="groupNum+'人'"
                    @click-left="$navBack('prePath')">
            </van-nav-bar>
        </div>
        <div class="padTop"></div>
        <group-children-tabs
                tabs-type="0"
                :allNum="allNum"
                :memberNum="memberNum"
                :screedGuestNum="screedGuestNum"
                :screedManNum="screedManNum"
                @change="tabsChange"></group-children-tabs>
        <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh" ref="">
            <van-list
                    ref=""
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="onLoad">
                <div v-for="(c,k) in childrenList" :key="k">
                    <div class="page-pad-pk bg-white-pk teamList">
                        <div class="d-flex-pk teamWrap">
                            <div class="padRight myGroup">
                                <pk-img
                                        :src="c.headPortrait"
                                        round
                                        width="50px"
                                        height="50px">
                                </pk-img>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex-pk teamRole">
                                    <div class="padRight text-black-pk font-size-15-pk">{{c.nickName}}</div>
                                    <div class="d-flex-pk userRole">
                                        <div>
                                            <img v-if="c.roleGrade == 0" class="roleGrade" src="../../assets/images/roleGrade1.png">
                                            <img v-if="c.roleGrade == 1" class="roleGrade" src="../../assets/images/roleGrade2.png">
                                            <img v-if="c.roleGrade == 2" class="roleGrade" src="../../assets/images/roleGrade3.png">
                                            <img v-if="c.roleGrade == 3" class="roleGrade" src="../../assets/images/roleGrade4.png">
                                        </div>
                                        <div class="text-gray-deep-pk font-size-12-pk">{{c.roleName}}</div>
                                    </div>
                                </div>
                                <div class="text-gray-b3-pk font-size-13-pk">{{c.registerTime}}</div>
                                <div class="sales" @click="getChildSales(c.userId,k)">
                                    <van-cell center title="贡献收益" class="item"  is-link>￥{{c.allRewardMoney}}</van-cell>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
        <div class="childSalesInfo">
            <van-popup v-model="showChildSales" :style="{ height: '52%',width:'80%' }">
               <div class="text-black-pk font-size-14-pk">
                   <div class="d-flex-pk bg-D82D11 userInfo">
                       <div>
                           <pk-img
                                   :src="childSalesInfo.headPortrait"
                                   round
                                   width="30px"
                                   height="30px"/>
                       </div>
                       <div class="nickName font-size-15-pk">{{childSalesInfo.nickName}}</div>
                   </div>
                   <div class="rewardInfo">
                       <div class="light-botm">
                           <div class="d-flex-pk rewardMoney">
                               <div class="flex-grow-1">贡献收益</div>
                               <div class="text-red-pk">￥0</div>
                           </div>
                       </div>
                       <div class="rewardItem text-center-pk">
                           <div class="d-flex-pk item bottomGray">
                               <div>
                                   <div>今日预计收益</div>
                                   <div class="text-red-pk">￥0</div>
                               </div>
                               <div class="lineGray"></div>
                               <div>
                                   <div>今日确认收益</div>
                                   <div class="text-red-pk">￥0</div>
                               </div>
                           </div>
                           <div class="d-flex-pk item ">
                               <div>
                                   <div>本月预计收益</div>
                                   <div class="text-red-pk">￥0</div>
                               </div>
                               <div class="lineGray"></div>
                               <div>
                                   <div>本月确定收益</div>
                                   <div class="text-red-pk">￥0</div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="itemNum ">
                       <div class="d-flex-pk">
                           <div class="flex-grow-1 text-black-pk">最近直邀人数</div>
                           <div class="text-red-pk">{{childSalesInfo.inviteNum}}</div>
                       </div>
                       <div class="d-flex-pk">
                           <div class="flex-grow-1 text-black-pk">最近下单人数</div>
                           <div class="text-red-pk">{{childSalesInfo.orderNum}}</div>
                       </div>
                       <div class="d-flex-pk">
                           <div class="flex-grow-1 text-black-pk">直属下级人数</div>
                           <div class="text-red-pk">{{childSalesInfo.childNum}}</div>
                       </div>
                   </div>
               </div>
            </van-popup>
        </div>
    </div>
</template>
<script>
    import GroupChildrenTabs from "./GroupChildrenTabs"
    import PkImg from "../../components/PkImg";
    export default {
        components:{
            PkImg,
            GroupChildrenTabs,
        },
        data(){
            return{
                childrenList:[],
                userInfo: {},
                userId:"",
                groupNum:0,
                //团队成员
                childSalesInfo: {
                    headPortrait:"",
                    nickName:"",
                },
                page: this.$global.page,
                size: this.$global.size,
                pageNum: 1,
                pages:  this.$global.pages,
                total:0,
                showChildSales:false,
                isRefreshing: false,//上拉刷新
                loading: false,
                finished: false,
                search: {
                    roleGrade: ""
                },
                allNum:0,//全部
                memberNum:0,//新秀
                screedGuestNum:0,//屏客
                screedManNum:0,//屏侠
                parentId:"",//父级id
            }
        },

        created() {

        },
        mounted() {
            this.$toast.loading();
            this.getUserInfo();
            this.getChildren();
        },
        methods:{
            //获取用户信息
            getUserInfo(){
                this.$api.getUserInfo('1').then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.groupNum=result.groupNum;
                        this.parentId=result.userId;
                        this.getGradeNum(this.parentId);
                        this.userInfo=result;
                    }
                })
            },
            getGradeNum(parentId){
                this.$api.getGradeNum(parentId).then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.allNum=result.allNum;
                        this.memberNum=result.memberNum;
                        this.screedGuestNum=result.screedGuestNum;
                        this.screedManNum=result.screedManNum;
                    }
                })
            },
            getChildren(type){
                this.$api.getChildren({
                    "page": this.page,
                    "size": this.size,
                    "roleGrade":this.search.roleGrade,
                    "userId": this.userId
                }).then(res=>{
                    this.$toast.clear();
                    this.loading = false;
                    let result = this.$resArr(res);
                    if(result){
                        this.total = parseInt(result.total);
                        this.pageNum = result.pageNum;
                        this.pages = result.pages;
                        if(type === "load") {
                            this.childrenList = this.childrenList.concat(result.list);
                        }else {
                            this.childrenList=result.list
                        }
                        this.onLoad()
                    }
                })
            },
            getChildSales(userId,k){
                this.$api.getChildSales(userId).then(res=>{
                    let result=this.$resData(res)
                    if(result){
                        this.childSalesInfo=result;
                        this.childSalesInfo.headPortrait = this.childrenList[k].headPortrait;
                        this.childSalesInfo.nickName = this.childrenList[k].nickName;
                        this.showChildSales=true;
                    }
                })

            },
            //上拉刷新
            onRefresh() {
                this.$toast.loading({
                    message: "加载中...",
                });
                this.page = 1;
                this.size = this.$global.size;
                this.getChildren();
                this.isRefreshing = false
            },
            //下拉加载
            onLoad() {
                if(this.page >= this.pages) {
                    this.finished = true
                }else {
                    this.page ++;
                    this.getChildren("load")
                }
            },
            tabsChange(val) {
                //val是传过来的status的值
                this.page = 1;
                this.search.roleGrade = val;
                this.$toast.loading();
                this.getChildren();
            },
        }
    }
</script>
<style lang="scss" scoped>
    .GroupChildren{
        line-height: 2;
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
            .teamNum{
                padding-left: 10px;
            }
        }
        .padTop{
            padding-top: 90px;
        }
        .padRight{
            padding-right: 15px;
        }
        .teamList{
            border-radius: 4px;
            margin: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
            .teamWrap{
                align-items: start;
                .van-cell{
                    padding: 10px;
                    background: #F5F5F5;
                    color: #1A1A1A;
                    line-height: 20px;
                }
                .van-cell__value {
                    color: #D82D11;
                }
                .van-cell__right-icon {
                    color: #d82d11;
                }
                .sales{
                    padding-top: 10px;
                }
                .myGroup{
                    img{
                        width: 50px;
                        height: 50px;
                    }
                }
                .userRole{
                    align-items: center;
                    img{
                        width: 14px;
                        height: 13px;
                        padding-right: 5px;
                        padding-top: 5px;
                    }
                }
            }
        }
        .childSalesInfo{
            .nickName{
                padding-left: 10px;
            }
            .userInfo{
                justify-content: center;
                padding: 10px ;
            }
            .rewardInfo{
                background-color: #f5f5f5;
                border-radius: 4px;
                margin:10px;
                .rewardMoney{
                    padding: 10px;
                }
                .rewardItem{
                    .lineGray{
                        margin-top: 20px;
                        height: 20px;
                        border-right: 1px solid #EDEDED;
                    }
                    .item{
                        justify-content: space-around;
                        padding: 10px 0;
                    }
                    .bottomGray{
                     border-bottom: 1px solid #EDEDED;
                    }
                }
                .light-botm{
                    border-bottom: 1px solid #dedede;
                }
            }
            .itemNum{
                padding:0 25px;
            }
        }
    }
</style>
